<template>
  <view class="exam-container">
    <!-- 标题头 -->
    <view class="table-header">
      <view class="header-cell time">交卷时间</view>
      <view class="header-cell score">答题得分</view>
      <view class="header-cell pass">是否及格</view>
      <view class="header-cell duration">答题时长</view>
    </view>
    <!-- 列表 -->
    <nut-cell-group>
      <nut-cell
        v-for="row in pagedData"
        :key="row.unikey"
        class="table-row"
        @click="handleRowClick(row)"
      >
        <template #title>
          <view class="cell time">
            <view>{{ row.datePart }}</view>
            <view>{{ row.timePart }}</view>
          </view>
        </template>
        <template #desc>
          <view class="cell score">{{ row.score }}</view>
        </template>
        <template #link>
          <view class="cell pass">
            <text :class="row.pass ? 'pass-text' : 'fail-text'">
              {{ row.pass ? '及格' : '不及格' }}
            </text>
          </view>
          <view class="cell duration">{{ row.duration }}</view>
        </template>
      </nut-cell>
    </nut-cell-group>
    <!-- 分页 -->
    <view class="pagination-center">
      <nut-pagination
        v-model="currentPage"
        :page-count="totalPages"
        mode="simple"
        @change="onPageChange"
      />
    </view>
  </view>
</template>

<script setup>
import { ref, computed,onMounted } from 'vue'
import Taro from '@tarojs/taro'
import config from '../../config'

// 模拟数据，实际使用时可在 onShow 中调用接口获取

const pageSize = 10
const currentPage = ref(1)
const recordList = ref([])
/* NutUI Table 列描述，宽度均 25% */
const columns = [
  { title: '交卷时间', key: 'submitTime', align: 'center', style: 'width:25%' },
  { title: '答题得分', key: 'score', align: 'center', style: 'width:25%' },
  { title: '是否及格', key: 'passText', align: 'center', style: 'width:25%' },
  { title: '答题时长', key: 'duration', align: 'center', style: 'width:25%' }
]
const userId = ref(null);
// 获取数据（示例）
function fetchRecords() {
  if (!userId) {
    Taro.showToast({
      title: '请先登录',
      icon: 'none',
      duration: 2000,
    });
    return;
  }
  Taro.request({
    url: `${config.apiUrl}/exam/getExamRecords/${userId.value}`,
    method: 'GET',
    success: (res) => {
      console.log(res.data.data.list)
      recordList.value = Array.isArray(res.data.data.list) ? res.data.data.list : []
    },
    fail: (err) => {
      console.log(err)
    }
  })
}
onMounted(() => {
  userId.value = Taro.getStorageSync('id')
  if (userId.value == null) {
    Taro.navigateBack('/pages/profile/index')
  }
  fetchRecords()
})

const totalPages = computed(() =>
  Math.ceil(recordList.value.length / pageSize)
)

const pagedData = computed(() => {
  const arr = Array.isArray(recordList.value) ? recordList.value : []
  const start = (currentPage.value - 1) * pageSize
  return arr.slice(start, start + pageSize).map(item => {
    // 拆分 submitTime
    let datePart = '', timePart = ''
    if (item.submitTime && typeof item.submitTime === 'string') {
      const parts = item.submitTime.split(' ')
      datePart = parts[0] || ''
      timePart = parts[1] || ''
    }
    return {
      ...item,
      datePart,
      timePart
    }
  })
})

function prevPage() {
  if (currentPage.value > 1) currentPage.value--
}

function nextPage() {
  if (currentPage.value < totalPages.value) currentPage.value++
}

function handleRowClick(row) {
  Taro.navigateTo({
    url: `/pages/recordDetails/recordDetails?unikey=${row.unikey}`
  })
}

const onPageChange = (val) => {
  currentPage.value = val
}
</script>

<style lang="scss">
.exam-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f8f8f8;
}

/* 表头等分 */
.table-header {
  display: flex;
  background: #0271c1;
  color: #fff;
  font-weight: 600;
  font-size: 28rpx;
  border-radius: 12rpx 12rpx 0 0;
  overflow: hidden;
}
.header-cell {
  flex: 1;
  text-align: center;
  padding: 18rpx 0;
}
.time, .score, .pass, .duration {
  flex: 1;
  text-align: center;
  font-size: 26rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 行样式 */
.table-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e6e6e6;
  background: #fff;
  min-height: 80rpx;
}

/* 及格/不及格高亮 */
.pass-text {
  color: #07c160;
  font-weight: bold;
}
.fail-text {
  color: #e60000;
  font-weight: bold;
}

/* 分页样式 */
.pagination-center {
  display: flex;
  justify-content: center;
  margin: 32rpx 0 0 0;
}
</style> 